<template>
	<div v-if="dataInfo">
		<view class="wrap-order-info">
			<view class="title-color f-28 fBold"> 订单信息 </view>

			<view class="technician-info" v-if="userStatus === 1">
				<view class="left f-28"> 服务师: </view>

				<view class="info-bg flex align-center just-between">
					<image class="avatar" :src="dataInfo.technician.work_image" />

					<view class="nickname-distance">
						<view class="title-color f-28">
							{{ dataInfo.technician.name }}
						</view>

						<view class="distance f-24" v-if="dataInfo.status === '4'">
							当前距您{{ dataInfo.left_distance }}km
						</view>
					</view>

					<view
						class="btn-bg flex align-center"
						v-if="dataInfo.status !== '-1' && dataInfo.status !== '6' && dataInfo.status !== '7'"
					>
						<view
							class="f-28"
							@click="$filters.openMapNav(dataInfo.technician)"
							v-if="dataInfo.status === '4'"
						>
							实时位置
						</view>
						<view class="f-28" @click="$filters.callPhone(dataInfo.technician.mobile)"> 联系ta </view>
					</view>
				</view>
			</view>

			<view class="info-item flex align-center just-between">
				<view class="left f-28"> 下单时间: </view>

				<view class="value f-28">
					{{ dataInfo.createtime_text }}
				</view>
			</view>

			<view class="info-item flex align-center just-between">
				<view class="left f-28"> 服务时间: </view>

				<view class="value f-28">
					{{ dataInfo.start_service_time_text }}
				</view>
			</view>

			<view class="info-item flex align-center just-between">
				<view class="left f-28"> 车费详情: </view>

				<view class="value f-28">
					{{ getTravelTypeText(dataInfo.car_type) }}
					全程{{ dataInfo.distance }}km
				</view>
			</view>

			<view class="info-item flex align-center just-between">
				<view class="left f-28"> 出行费用: </view>

				<view class="value f-28 price-color">
					{{ getTravelTypeText(dataInfo.car_type) }}
					¥{{ dataInfo.car_price }}
				</view>
			</view>

			<view class="info-item flex align-center just-between">
				<view class="left f-28"> 项目费用: </view>

				<view class="value f-28 price-color"> ¥{{ dataInfo.service_price }} </view>
			</view>

			<view class="info-item flex align-center just-between">
				<view class="left f-28"> 备注: </view>

				<view class="value f-28"> {{ dataInfo.remark }} </view>
			</view>

			<view class="info-item flex align-center just-between">
				<view class="left f-28"> 支付方式: </view>

				<view class="value f-28">
					{{ dataInfo.pay_type_text }}
				</view>
			</view>

			<view class="total-price flex align-center just-end f-28">
				<text class="title-color">总计：</text>
				<text class="price-color"> ¥{{ dataInfo.total_price }} </text>
			</view>
		</view>
	</div>
</template>

<script>
	export default {
		props: {
			/**
			 * 详情数据
			 */
			dataInfo: {
				type: Object,
				default: null,
			},
			/**
			 * 用户身份 1:普通用户 2:技师
			 */
			userStatus: {
				type: Number,
				default: 1,
			},
		},
		data() {
			return {};
		},
		methods: {
			/**
			 * 获取出行方式
			 */
			getTravelTypeText(type) {
				let text = "";

				const index = parseInt(type) - 1;
				const travelTypeArray = ["出租车", "地铁/公交"];

				if (index >= 0 && index < travelTypeArray.length) {
					text = travelTypeArray[index];
				}

				return text;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-order-info {
		margin-top: 20rpx;
		width: 100%;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: white;
		padding: 30rpx 20rpx;
		box-sizing: border-box;

		.technician-info {
			margin-top: 30rpx;
			width: 100%;
			overflow: hidden;

			.info-bg {
				margin-top: 30rpx;
				width: 100%;
				overflow: hidden;

				.avatar {
					width: 82rpx;
					height: 82rpx;
					overflow: hidden;
					border-radius: 50%;
				}

				.nickname-distance {
					margin-left: 30rpx;
					flex: 1;
					overflow: hidden;

					.distance {
						margin-top: 12rpx;
						color: $old-price-color;
					}
				}

				.btn-bg {
					margin-left: 10rpx;
					overflow: hidden;

					> view {
						height: 48rpx;
						line-height: 48rpx;
						text-align: center;
						color: $theme-color;
						border-radius: 6rpx;
						border: 2rpx solid $theme-color;
						margin-right: 20rpx;
						padding: 0 15rpx;

						&:last-child {
							margin-right: 0rpx;
						}
					}
				}
			}
		}

		.title-color {
			color: $title-color;
		}

		.price-color {
			color: $price-color !important;
		}

		.info-item {
			width: 100%;
			overflow: hidden;
			margin-top: 30rpx;
		}

		.left {
			color: $sub-title-color;
			margin-right: 20rpx;
		}
		.value {
			flex: 1;
			text-align: right;
			color: $title-color;
		}

		.total-price {
			margin-top: 30rpx;
			padding-top: 30rpx;
			border-top: 2rpx solid #ececec;
		}
	}
</style>
